<template>
    <div>
        <div style="text-align: left;">
            <el-button @click="router.push('/WarehouseTypeAdd')">新增</el-button>
            <el-button @click="Upt">修改</el-button>
            <el-button @click="BatchDel">删除</el-button>
            <el-button @click="reset">刷新</el-button>
            <el-button @click="">导入</el-button>
            <el-button @click="exceptExcel">导出</el-button>
        </div>
        <h3 style="margin-top: 20px;margin-bottom: 20px;color: black;font-size: x-large;">仓库类别列表</h3>
        <el-row>
            <el-col :span="6">
                <el-tree v-model="value" :data="options" check-strictly :render-after-expand="false"
                    style="width: 240px;font-size: large" :default-expand-all="true" @node-click="handleNodeClick" />
            </el-col>
            <el-col :span="18">
                <el-table :data="tableData" style="width: 100%" @selection-change=handleSelectionChange>
                    <el-table-column type="selection" />
                    <el-table-column type="index" label="序号" />
                    <el-table-column prop="wcTypeNumber" label="仓库类别编号" />
                    <el-table-column prop="wcTypeName" label="仓库类别名称" />
                </el-table>
                <!-- <table style="text-align: center;">
                    <tr>
                        <td>
                            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes"
                                :total="page.totalcount">
                                <span> , 每页 {{ }} 条，当前 {{ }} / {{ }} 条</span>
                            </el-pagination>
                        </td>
                        <td>
                            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                                layout="slot, prev, pager, next" :total="page.totalcount">
                                <el-button :disabled="page.pageIndex == 1" @click="page.pageIndex = 1">首页</el-button>
                            </el-pagination>
                        </td>
                        <td>
                            <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                                :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                                layout="slot, jumper" :total="page.totalcount">
                                <el-button :disabled="page.pageIndex == page.pagecount"
                                    @click="page.pageIndex = page.pagecount">尾页</el-button>
                            </el-pagination>
                        </td>
                    </tr>
                </table> -->
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as XLSX from 'xlsx';
import http from '../../../http.js'
const route = useRoute()
const router = useRouter()

const tableData = ref([])
const data = ref([])
const sel = ref([])
const options = ref([]);
const value = ref()

const page = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalcount: 0,
    pagecount: 0
})

const form = reactive({
    "warehouseCategoryId": 0,
    "warehouseId": 0,
    "wcTypeNumber": "",
    "wcTypeName": "",
    "wcFatherType": "",

})

watch(page, () => {
    GetWarehouseTypeList()
})
interface Tree {
    label: string
    children?: Tree[]
}
const defaultProps = {
    children: 'children',
    label: 'label',
}
//显示左侧产品分类树形显示
const getwarehousetype = () => {
    axios.get(http.zblnb + "/erpck/api/WareType/GetWareTypeSelectList?id=0")
        .then(res => {
            options.value = res.data.data;
        })
        .catch(err => {
            console.log(err);
        })
}

//选择左侧产品分类
const handleNodeClick = (value: any) => {

    form.warehouseCategoryId = value.value;
    GetWarehouseTypeList()
}
//显示列表
const GetWarehouseTypeList = () => {
    axios.get(http.zblnb + "/erpck/api/WareType/GetWareType?id=" + form.warehouseCategoryId).then(res => {
        console.log(res.data.data);
        tableData.value = res.data.data;

    }).catch(err => {

    })
}

const reset = () => {
    window.location.reload();
}

const handleSelectionChange = (val: any) => {
    sel.value = val;
}
//删除
const BatchDel = () => {
    if (sel.value.length == 0) {
        ElMessage.error("请选择要删除的仓库类别")
        return
    }

    ElMessageBox.confirm(
        '确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            var wid = sel.value.map(ele => ele.warehouseCategoryId)
            var ids = {
                wid: wid
            }
            axios.put(http.zblnb + "/erpck/api/WareType/DelWarehouseType", ids).then(res => {
                if (res.data.data > 0) {
                    ElMessage.success("删除成功")
                    GetWarehouseTypeList()
                } else {
                    ElMessage.error("删除失败")
                }
            })
        })
        .catch(() => {

        })

}

//跳转修改
const Upt = () => {
    if (sel.value.length == 0) {
        ElMessage.error("请选择要修改的仓库类别")
        return
    }
    var id = sel.value.map(ele => ele.warehouseCategoryId)
    router.push("/WarehouseTypeUpt?id=" + id)
}

//导出
const exceptExcel = () => {
    ElMessageBox.confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then((response) => {
            //  this.selectdata 是复选框的 数据列表
            if (sel.value.length <= 0) {
                ElMessage.warning('请选择数据！');
                return;
            }
            let tableData = [
                ['序号', '仓库类别编号', '仓库类别名称']
            ] // 表格表头
            sel.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.wcTypeNumber,
                    item.wcTypeName,

                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '仓库分类') // 工作簿名称
            let name = '仓库分类管理' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}

onMounted(() => {
    GetWarehouseTypeList()
    getwarehousetype()
})
</script>

<style scoped></style>